<template>
	<view class="content">
		<view class="gradient-bg">
			<!-- 渐变背景 -->
			<view class="list-card-wrap">
				<view class="flex-row-between" style="margin-bottom: 8rpx;">
					<view class="flex-row">
						<text class="white-text font-24">任务编号</text>
						<text class="white-text font-24" style="margin-left: 20rpx;">{{form.no}}</text>
					</view>
					<view class="tag tag-gray">{{form.storehouseLocationNo || form.storehouseNo}}</view>
				</view>
				<view class="list-card">
					<view class="">
						<text class="black-text-34">{{form.productName}}</text>
						<text class="gray-text font-30">({{form.productNo}})</text>
					</view>
					<view class="content-blue flex-row">
						<view class="flex-column flex1">
							<text class="gray-text">申请数量</text>
							<text class="black-text">{{form.orderQty}}</text>
						</view>
						<view class="split"></view>
						<!-- <view class="flex-column flex1">
							<text class="gray-text">已入库数量</text>
							<text class="black-text">{{form.productNo}}</text>
						</view> -->
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">实际入库数量</text>
							<text class="blue-text">{{form.actualQty}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="s-input-wrap">
				<view class="s-input-box flex-row">
					<text class="black-text">库位</text>
					<input v-model="storehouseLocationNo" class="s-input flex1" placeholder="扫描 / 输入库位" @confirm="setLocationNo"/>
					<image v-if="storehouseLocationNo" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearLocationNo"></image>
					<image class="s-input-icon" src="/static/images/scan.png"></image>
				</view>
				<view class="s-input-box flex-row">
					<text class="black-text">条码</text>
					<input v-model="barCode" class="s-input flex1" placeholder="扫描 / 输入条码" @confirm="setBarcode"/>
					<image v-if="barCode" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearBarCode"></image>
					<image class="s-input-icon" src="/static/images/scan.png"></image>
				</view>
			</view>
		</view>
		
		<scroll-view class="content-list-card" scroll-y style="height: calc(100vh - 612rpx);">
			<view class="card" v-for="(item,index) in form.yardageGoodsRecordList" :key="index" >
				<view class="title flex-row-between">
					<view class="flex-row">
						<text class="gray-text">条码</text>
						<text class="black-text-34" style="margin-left: 8rpx;">{{item.barCode}}</text>
					</view>
					<!-- <image class="s-input-icon" src="/static/images/delete.png"></image> -->
					<uni-icons type="trash-filled" size="20" color="#8997A8" @click="deleteItem(index)"></uni-icons>
				</view>
				<view class="flex-row">
					<view class="content flex1 flex-column">
							<text class="gray-text">库位</text>
							<text class="black-text-34">{{item.storehouseLocationNo}}</text>
					</view>
					<view class="content flex1 flex-column">
						<text class="gray-text">入库数量</text>
						<view class="flex-row content-input">
							<input v-model="item.pickingQty" type="number" @input="setNum($event,item)" class="blue-text font-34 flex1" placeholder="" />
							<image class="edit-icon" src="/static/images/edit.png"></image>
							<!-- <uni-icons class="flex1" type="compose" size="18" color="#458B9C"></uni-icons> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="content-list-total flex-row-between">
			<text class="gray-text">合计:</text>
			<view class="flex-row">
				<text class="gray-text">扫描<text class="blue-text font-38">{{form.yardageGoodsRecordList.length}}</text>次,当前码货共<text class="blue-text font-38">{{currPickingQty}}</text>件</text>
				<view class="botton" @click="confirm">确认</view>
				<view class="botton p-botton" @click="complete">完成</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	import { validNum } from "@/utils/common"
	import {
		getYardageGoodsDetail,
		getYardageGoodsRecordList,
		confirm,
		complete
	} from "./api"
	import {
		getInStockBarcodeInfo,
		infoByLocationNo
	} from "@/api/common.js"
	
	export default {
		data(){
			return{
				storehouseLocationNo:'',
				barCode:'',
				barCodeInfo:{},
				number: 12,
				form:{
					id:'',
					no:'',
					yardageGoodsRecordList:[]
				}
			}
		},
		computed:{
			currPickingQty:function(){
				let pickingQty = 0
				this.form.yardageGoodsRecordList.forEach(item=>{
					pickingQty += parseFloat(item.pickingQty) 
				})
				return pickingQty || 0
			},
		},
		
		onLoad(option){
			this.form = {...this.form,...option};
			this.getYardageGoodsDetail()
		},
		methods:{
			// 效验数量不能大于条码物料数量
			setNum(event, item){
				item.pickingQty = validNum(event)
				if(item.pickingQty > item.barCodeInfo.quantity){
					this.$modal.msg(`输入数量不能大于当前条码数量`);
					this.$nextTick(()=>{
						item.pickingQty = item.barCodeInfo.quantity
					})
					return
				}
			},
			// 删除入库记录
			deleteItem(index){
				this.form.yardageGoodsRecordList.splice(index,1)
			},
			// 计算总码货件数
			calcPickingQty(){
				let pickingQty = 0
				this.form.yardageGoodsRecordList.forEach(item=>{
					pickingQty += parseFloat(item.pickingQty) 
				})
				return pickingQty || 0
			},
			// 获取详情数据
			getYardageGoodsDetail(){
				getYardageGoodsDetail(this.form.id).then(res=>{
					if (res.code == 200) {
						this.form.yardageGoodsRecordList = [];
						this.form = {...this.form, ...res.data}
						// if(this.form.orderStatus != 1){
						// 	this.getYardageGoodsRecordList()
						// }
					}
				})
			},
			// getYardageGoodsRecordList(){
			// 	getYardageGoodsRecordList({pageNum:1, pageSize:0,taskNo:this.form.no}).then(res=>{
			// 		if (res.code == 200) {
			// 			this.form.yardageGoodsRecordList = res.rows
			// 		}
			// 	})
			// },
			// 获取条码信息
			setBarcode(event){
				getInStockBarcodeInfo(event.detail.value).then(res=>{
					if(res.code == 200){
						if(res.data.productNo != this.form.productNo){
							this.$modal.msg(`当前条码对应的物料与码货物料不一致`);
							this.clearBarcode()
							return
						}
						if(!(res.data.status == "NORMAL" || !res.data.status)){
							this.$modal.msg(`当前条码被锁定/冻结`);
							this.clearBarcode()
							return
						}
						this.barCode = res.data.barCode
						this.barCodeInfo = res.data
						this.setCode()
					}
				})
			},
			// 清空条码信息
			clearBarcode(){
				this.$set(this,'barCode','')
				this.$set(this,'barCodeInfo',{})
			},
			// 清空库位信息
			clearStorehouse(){
				this.$set(this,'storehouseLocationNo','')
			},
			// 获取库位信息
			setLocationNo(event){
				infoByLocationNo(event.detail.value).then(res=>{
					if(res.code == 200){
						if(res.data.status != "NORMAL"){
							this.$modal.msg(`当前库位被锁定/冻结`);
							this.clearStorehouse()
							return
						}
						this.storehouseLocationNo = res.data.storehouseLocationNo
						this.setCode()
					}
				})
			},
			// 添加入库记录
			setCode(){
				if(this.storehouseLocationNo && this.barCode){
					let isExists = false
					for(let i=0;i<this.form.yardageGoodsRecordList.length;i++){
						let item = this.form.yardageGoodsRecordList[i];
						if(item.storehouseLocationNo==this.storehouseLocationNo && item.barCode == this.barCode){
							isExists = true;
							this.$modal.msg(`已存在该库位、条码数据，请直接更改数量`);
							this.clearBarcode()
							this.clearStorehouse()
							return
						}
					}
					if(isExists) return;
					this.form.yardageGoodsRecordList.push({
						taskNo: this.form.no,
						storehouseLocationNo: this.storehouseLocationNo,
						barCode: this.barCode,
						productNo: this.barCodeInfo.productNo,
						barCodeInfo: this.barCodeInfo,
						pickingQty:this.barCodeInfo.quantity
					})
					this.clearBarcode()
					this.clearStorehouse()
				}
			},
			confirm(){
				let isAllInput = true
				if(!this.form.yardageGoodsRecordList.length){
					this.$modal.msg(`入库数量不能为0`);
					return
				}
				for(let i=0; i<this.form.yardageGoodsRecordList.length;i++){
					let item = this.form.yardageGoodsRecordList[i];
					if(!item.pickingQty){
						isAllInput = false;
						this.$modal.msg(`入库数量不能为空`);
						return;
					}
				}
				if(!isAllInput){ return }
				if(this.form.orderQty < (this.form.actualQty + this.currPickingQty)){
					this.$modal.msg(`入库总数不能大于申请总数`);
					return
				}
				this.$modal.confirm('是否确认提交').then(() => {
					confirm(this.form).then(res=>{
						this.getYardageGoodsDetail()
						uni.$emit('refreshList',{msg:'页面更新'})
						this.$modal.msgSuccess("操作成功");
						// setTimeout(()=>{
						// 	uni.navigateBack();
						// }, 1000);
					})
				})
			},
			complete(){
				let isAllInput = true
				if(!(this.form.actualQty + this.currPickingQty)){
					this.$modal.msg(`入库总数不能为0`);
					return
				}
				for(let i=0; i<this.form.yardageGoodsRecordList.length;i++){
					let item = this.form.yardageGoodsRecordList[i];
					if(!item.pickingQty){
						isAllInput = false;
						this.$modal.msg(`入库数量不能为空`);
						return;
					}
				}
				if(!isAllInput){ return }
				if(this.form.orderQty <this.form.actualQty + this.currPickingQty){
					this.$modal.msg(`入库总数不能大于申请总数`);
					return
				}
				this.$modal.confirm('是否确认完成任务').then(() => {
					complete(this.form).then(res=>{
						// 延迟1秒跳转
						uni.$emit('refreshList',{msg:'页面更新'})
						this.$modal.msgSuccess("操作成功");
						setTimeout(()=>{
							uni.navigateBack();
						}, 1000);
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style scoped>
	
</style>